// 人员管理列表
<template>

<div class="member-manage"  ref='container'>
    <div class="tools-bar">
        
        <div class="search">
            <Input clearable placeholder="查询 会员名或电话号码" size='small' v-model="filterKey"></Input>
        </div>

        <div class="personal-type">
            <l-personal-type @click='(status) =>{personalTypeCheck(status,key)}' v-for='(modConf, key) of CheckedPersonalTypeIcon' :key='key' :conf='modConf'></l-personal-type>
        </div>

    </div>
    <div class="member-manage-content">

        <div class="over-box">  
            <Table
            ref='table'
            @on-current-change='currentRowChange' 
            @on-row-click='select' 
            :height='memberTableHeight'
            size='small'    
            highlight-row  
            :show-header='false'  
            :data='tableData' 
            :columns='tableColumns'></Table>
        </div>
       
    </div>

</div>

</template>

<script lang='ts'>
import {Component, Prop, Vue} from 'vue-property-decorator'
import selectItem from '../select_item'
import personalType from '@/components/ivew_components/table_label_compoents/personal_type.vue'
import personalTypeIcon from '@/components/ivew_conf/personal_type_icon'
import tableDepartmentOwnershiop from '../table_department_ownershiop.vue'
import {deepCopy} from '@/utils/tools'
import {store} from '@/store/index'

import imgs from '@/img_path.json'

@Component({
    components: {
        'l-personal-type': personalType
    }
})
export default class memberManage extends selectItem{
    name:string = 'member-manage'

    @Prop()    
    data

    // 人员类型配置
    personalTypeIcon = personalTypeIcon

    memberTableHeight = 300;

    get CheckedPersonalTypeIcon(){
        
        let cache = deepCopy(personalTypeIcon)

        Object.keys(cache).forEach(key =>{
            cache[key]['checkable'] = true;
        })

        return cache
    }
    
        
    get tableData():any[]{

        let cache = [... this.data];
        let personalTypeChecked = this.personalTypeChecked;
        let _vue = this;

       cache = cache.filter(item =>{
            return _vue.filtetPersonalType(item) && (item.nickname.match(this.filterKey) || item.phone.match(this.filterKey))
       })

        return cache
    }

    tableColumns = [
        {
            title: 'icon',
            width: 40,
            fixed: 'left',
            render(h, {row}){

                let icon = h('img',{
                    attrs: {
                        src: imgs.logo
                    },
                    style:{
                        overflow: 'hidden',
                        borderRadius: '100%',
                        width: '20px',
                        height: '20px',
                    }
                })

                return h('div', {}, [icon])

            },
        },
        {
            title: '用户名',
            width: 100,
            key: 'nickname',
            fixed: 'left',
        },
        {
            title: '电话号码',
            width: 140,
            render(h,{row}){

                let phone = row.phone || '无'
                
                return h('span', null,[
                    phone
                ])
            }
            // key: 'phone'
        },
        {
            title: '归属部门',
            width: 160,
            ellipsis:true,
            render(h, {row, column, index}){

                return h(tableDepartmentOwnershiop, {
                    props:{
                        companyName: row.company,
                        departmentName: row.department
                    }
                })
            }
        },
        {
            title: '类型',
            width: 300,
           
            render(h, {row, column, index}){

                let personalTypeContent = []

                Object.keys(personalTypeIcon).forEach(key =>{

                    if(row[key]){
                        personalTypeContent.push(h(personalType, {
                            props:{
                                conf: deepCopy(personalTypeIcon)[key]
                            }
                        }))
                    }
                    
                })
                
                return h('div', {}, [
                    personalTypeContent
                ])
            }
        },
       
       
        
    ]

    personalTypeChecked = Object.keys(personalTypeIcon)
    
    // 类型过滤
    filtetPersonalType(item){
        let end =false;
        
        this.personalTypeChecked.forEach(key =>{

            if(item[key]){
                end = true;
            }
        })
        
        return end;
    }
    
    personalTypeCheck (status,key){

        this.personalTypeChecked
        let index = this.personalTypeChecked.indexOf(key);

        if(status){

            if(index < 0){
                this.personalTypeChecked.push(key)
            }

        }else{
            
            if(index >= 0){
                this.personalTypeChecked.splice(index, 1)
            }
        }

    }

    mounted (){

        // 限制会员列表高度
        const container = <HTMLElement>this.$refs['container'];
        this.memberTableHeight = container.scrollHeight - 60;

    }
    

}


</script>

<style lang='scss'>


.member-manage{
    
    $overBoxW: _rem(760px);
    width: $overBoxW;
    height: 100%;

    .member-manage-content{
        overflow: hidden;
        width: $overBoxW - _intervals(2);
    }
    
    .over-box{
        width: $overBoxW;
    }
    
    
    .tools-bar{
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-bottom: _intervals();
    }

    .search{
        flex: 1 1;
    }


    // 去除表格原有样式
    .t-row{
        box-sizing: border-box;
        height: _rem(40px);
    }

    .ivu-table-wrapper{
        border: none;
    }

    .ivu-table-row-highlight div{
        color: $font_light_color;
    }

    div.ivu-table::after{
        content: '';
        display: none;
    }
}

</style>